<template>
  <view class="container">
    <view class="canvas_box">
      <view class="canvas_container">
        <canvas
          canvas-id="sticky-board"
          @touchstart="startStroke"
          @touchmove="drawStroke"
          @touchend="endStroke"
          disable-scroll="true"
        >
          <view class="canvasTips">{{ $t('generate.centerTip') }}</view>
          <view class="canvasLine"></view>
        </canvas>
      </view>
    </view>
    <view class="bottom_box">
      <view class="operation">
        <view class="againRefresh" @tap="undo">
          <uni-icons type="refresh" size="30"></uni-icons>
          <text>{{ $t('generate.prevStep') }}</text>
        </view>
        <view class="againRefresh" @tap="clearCanvas">
          <uni-icons type="trash" size="30"></uni-icons>
          <text>{{ $t('generate.clearCanvas') }}</text>
        </view>
      </view>
      <view class="button_box" @tap="startPrints">
        {{ $t('generate.confirmPrint') }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        ctx: null,
        points: [],
        steps: [],
        canvasWidth: 0,
        canvasHeight: 0,
      };
    },
    onReady() {
      this.initCanvas();
    },
    methods: {
      initCanvas() {
        this.ctx = uni.createCanvasContext('sticky-board', this);
        const query = uni.createSelectorQuery().in(this);
        query
          .select('.canvas_container')
          .boundingClientRect((data) => {
            this.canvasWidth = data.width;
            this.canvasHeight = data.height;
            this.ctx.setFillStyle('white');
            this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
            this.ctx.lineWidth = 6; // 加粗线条
            this.ctx.lineCap = 'round';
            this.ctx.setStrokeStyle('#F1BA3F'); // 使用纯黑色线条
            this.ctx.draw();
          })
          .exec();
      },
      startStroke(e) {
        this.points = [];
        this.points.push({
          x: e.touches[0].x,
          y: e.touches[0].y,
        });
      },
      drawStroke(e) {
        this.points.push({
          x: e.touches[0].x,
          y: e.touches[0].y,
        });
        this.drawCurrentPath();
      },
      endStroke() {
        if (this.points.length > 1) {
          this.steps.push({ points: this.points });
        }
        this.points = [];
        this.drawSteps();
      },
      drawCurrentPath() {
        this.ctx.beginPath();
        this.ctx.moveTo(this.points[0].x, this.points[0].y);
        this.points.forEach((point) => {
          this.ctx.lineTo(point.x, point.y);
        });
        this.ctx.stroke();
        this.ctx.draw(true);
      },
      drawSteps() {
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.ctx.setFillStyle('white');
        this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.steps.forEach((item) => {
          this.ctx.beginPath();
          this.ctx.moveTo(item.points[0].x, item.points[0].y);
          item.points.forEach((point) => {
            this.ctx.lineTo(point.x, point.y);
          });
          this.ctx.stroke();
        });
        this.ctx.draw(true);
      },
      undo() {
        if (this.steps.length > 0) {
          this.steps.pop();
          this.drawSteps();
        }
      },
      clearCanvas() {
        this.points = [];
        this.steps = [];
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.ctx.setFillStyle('white');
        this.ctx.setStrokeStyle('#F1BA3F');
        this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.ctx.draw();
      },
      startPrints() {
        uni.setStorageSync('printType', 'handDrawn');
        uni.canvasToTempFilePath({
          canvasId: 'sticky-board',
          success: (res) => {
            const base64Data = res.tempFilePath.split('base64,')[1];
            uni.setStorageSync('printSrc', base64Data);
            uni.setStorageSync('printName', '');
            uni.navigateTo({
              url: '/pages/generate/print',
            });
          },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    .canvas_box {
      width: 100%;
      flex: 1;
      background-color: #fff;
      box-sizing: border-box;
      padding: 10px;
      .canvas_container {
        width: 100%;
        height: 100%;

        .canvasLine {
          width: 1px;
          height: 100%;
          border-left: 1px dashed #777;
          margin: 0 auto;
          // margin-left: 1px;
        }
        .canvasTips {
          width: 100%;
          height: 20px;
          display: flex;
          justify-content: center;
          font-size: 12px;
          color: #777;
          line-height: 20px;
          // margin: 0 auto;
        }
        canvas {
          width: 100%;
          height: 100%;
          border: 1px solid #ccc;
        }
      }
    }

    .bottom_box {
      background-color: #fff;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;

      .operation {
        background-color: #fff;
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

      .againRefresh {
        width: 45%;
        height: 50px;
        background-color: #f3f3f3;
        color: #000;
        display: flex;
        font-size: 16px;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
      }

      .button_box {
        width: 80%;
        height: 50px;
        margin: 10px auto;
        background-color: #f9e056;
        border-radius: 10px;
        color: #83320d;
        font-size: 18px;
        text-align: center;
        line-height: 50px;
      }
    }
  }
</style>
